//切换地图按钮
const changeMap = document.getElementById('changeMap');
changeMap.onclick = function (e) {
    const hideDiv = document.getElementById('hideDiv');
    hideDiv.style.display = 'block'
    e.stopPropagation();//防止冒泡
}
//鼠标点击其他地方，地图列表隐藏
document.onclick = function (e) {
    hideDiv.style.display = 'none'
}
//全图按钮
fullMap.onclick = function () {
    let fullMap = document.getElementById('fullMap');
    FullScreen();
}
backFullMap.onclick = function () {
    leftDiv.style.display = 'block';
    rightDiv.style.display = 'block';
    backFullMap.style.display = 'none';
}
//漫游功能
const roam = document.getElementById('roam');
roam.onclick = function (e) {
    map.getView().setCenter([106, 36]);
    map.getView().setZoom(5);
    e.stopPropagation();//防止冒泡
}
//定位功能
let btn1 = document.getElementById('btn1');
btn1.onclick = function () {
    let pos = document.getElementById('pos');
    pos.style.display = 'block';
    //获取鼠标点击位置
    map.on('click', function (event) {
        let coordinate = event.coordinate;
        let latitude = document.getElementById('latitude');
        let longitude = document.getElementById('longitude');
        latitude.value = coordinate[1];
        longitude.value = coordinate[0];
    });
}
//获取close按钮
let close = document.getElementById('close');
//点击close按钮，隐藏定位框
close.onclick = function () {
    pos.style.display = 'none';
}
//测距功能
let btn4 = document.getElementById('btn4');
btn4.onclick = function () {
    document.getElementById('distanceDiv').style.display = 'block';
    //点击按钮绘制线段
    let draw = new ol.interaction.Draw({
        source: source,
        type: 'LineString'
    });
    //添加绘制线段控件
    map.addInteraction(draw);
    //设置线段颜色
    draw.on('drawend', function (event) {
        let feature = event.feature;
        let length = feature.getGeometry().getLength();
        let dis = document.getElementById('dis');
        dis.value = length * 100 + '千米';
        feature.setStyle(new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#ff0000',
                width: 2
            })
        }));
    });
    //获取id为close2的按钮
    let close2 = document.getElementById('close2');
    //点击close2按钮，隐藏测距框
    close2.onclick = function () {
        document.getElementById('distanceDiv').style.display = 'none';
        //清除绘制的线段
        source.clear();
        //关闭测距功能
        map.removeInteraction(draw);
    }

}


//获取测面积按钮
let btn5 = document.getElementById('btn5');
btn5.onclick = function () {
    document.getElementById('areaDiv').style.display = 'block';
    //测量面积
    let draw = new ol.interaction.Draw({
        source: source,
        type: 'Polygon'
    });
    //添加绘制面控件
    map.addInteraction(draw);
    //设置面积颜色
    draw.on('drawend', function (event) {
        let feature = event.feature;
        let area = feature.getGeometry().getArea();
        let area2 = area * 100;
        let area3 = area2.toFixed(2);
        let area4 = document.getElementById('area');
        area4.value = area3 + '平方千米';
        feature.setStyle(new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#ff0000',
                width: 2
            })
        }));
    });
    //获取id为close3的按钮
    let close3 = document.getElementById('close3');
    //点击close3按钮，隐藏测面积框
    close3.onclick = function () {
        document.getElementById('areaDiv').style.display = 'none';
        //清除绘制的面
        source.clear();
        //关闭测面积功能
        map.removeInteraction(draw);
    }



}


//获取截图按钮
let btn6 = document.getElementById('btn6');
btn6.onclick = function () {

}


//获取id为btn7的按钮
let btn7 = document.getElementById('btn7');
btn7.onclick = function () {
    swipeDiv.style.display = 'block';
    //获取id为swipe的input
    let swipe = document.getElementById('swipe');
    openStreetMapLayer.on('prerender', function (event) {
        let ctx = event.context; //获取canvas渲染上下文
        let width = ctx.canvas.width * (swipe.value / 100); //卷帘初始位置
        ctx.save(); //保存canvas设置
        ctx.beginPath();//绘制路径
        ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height);  //绘制矩形
        ctx.clip();
    })
    openStreetMapLayer.on('postrender', function (event) {
        let ctx = event.context;
        ctx.restore();
    });
    swipe.addEventListener('input', function () {
        map.render();
    }, false)

}
//获取id为close4的按钮
let close4 = document.getElementById('close4');
//点击close4按钮，隐藏卷帘框
close4.onclick = function () {
    swipeDiv.style.display = 'none';
    //关闭卷帘功能
    openStreetMapLayer.un('prerender');
    openStreetMapLayer.un('postrender');

}

//获得id为btn8的按钮
//绘制按钮
let btn8 = document.getElementById('btn8');
btn8.onclick = function () {
    let drawDiv = document.getElementById('draw');
    drawDiv.style.display = 'block';
}
//创建点线面绘制工具
let point = new ol.interaction.Draw({
    //source为当前显示的source
    source: source,
    type: 'Point',

});
let line = new ol.interaction.Draw({
    //source为当前显示的source
    source: source,
    type: 'LineString'
});
let polygon = new ol.interaction.Draw({
    //source为当前显示的source
    source: source,
    type: 'Polygon'
});